<template>
	<div class="wrap">
		<div class="page_handler" v-if="dataHandler.length > 0">
			<div class="item" v-for="(item, i) in dataHandler" :key="i" @click="item.method">
				<div class="icons"><i :class="item.icon"></i></div>
				<div>{{ item.info }}</div>
			</div>
		</div>
		<el-form ref="form" :model="form" :label-width="label" class="search_form" :inline="inline" :rules="rules"
			:style="{ width: width }">
			<!-- <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="item.col" :lg="item.col" :xl="item.col" v-for="(item, i) in formList" :key="i">
      </el-col>
    </el-row> -->
			<el-form-item :label="item.name" v-for="(item, i) in formList" :key="i" :required="!!item.required"
				:prop="item.key" :label-width="item.lableWidth ? item.lableWidth : ''">
				<!-- 输入框 -->
				<el-input v-model="form[item.key]" :placeholder="item.placeholder" size="small"
					v-if="item.type == 'input'" clearable>
					<span v-if="item.append" slot="append">{{ item.append }}</span>
				</el-input>
				<!-- 输入框区间 -->
				<div v-if="item.type == 'inputlist'" class="form-inputlist">
					<el-input v-model="form[item.list[0].key]" :placeholder="item.list[0].placeholder" size="small"
						clearable>
						<span v-if="item.list[0].append" slot="append">{{ item.list[0].append }}</span>
					</el-input>
					<span class="tipste">-</span>
					<el-input v-model="form[item.list[1].key]" :placeholder="item.list[0].placeholder" size="small"
						clearable>
						<span v-if="item.list[1].append" slot="append">{{ item.list[1].append }}</span>
					</el-input>
				</div>
				<!-- 下拉选择 -->
				<el-select v-else-if="item.type == 'select'" v-model="form[item.key]" :multiple="item.multiple" :placeholder="item.placeholder"
					size="small"  :style="{ width: item.width }"
					:clearable="item.clearable?item.clearable:true">
					<el-option :label="item.prop ? sv[item.prop[0]] : sv.name"
						:value="item.prop ? sv[item.prop[1]] : sv.value" v-for="(sv, s) in item.selectList" :key="s">
					</el-option>
				</el-select>
        <!-- 下拉选择（树结构） -->
        <el-cascader v-else-if="item.type == 'selectTree'" v-model="form[item.key]" :multiple="item.multiple" :placeholder="item.placeholder"
        	size="small" :style="{ width: item.width }"  :props="{ checkStrictly: true }"
        	:clearable="item.clearable?item.clearable:true" :options="item.selectTreeList">
        	<!-- <el-option :label="item.prop ? sv[item.prop[0]] : sv.name"
        		:value="item.prop ? sv[item.prop[1]] : sv.value" v-for="(sv, s) in item.selectList" :key="s">
        	</el-option> -->
        </el-cascader>
        <!-- 单选 -->
				<el-radio-group v-if="item.type == 'radio'" v-model="form[item.key]" clearable>
					<el-radio v-for="(rv, r) in item.radioList" :key="r" :label="rv.value">{{ rv.name }}</el-radio>
				</el-radio-group>
				<!-- 时间选择 -->
				<el-date-picker type="date" size="small" :placeholder="item.placeholder" v-model="form[item.key]"
					:value-format="item.valueformat ? item.valueformat : 'timestamp'" style="width: 100%"
					v-else-if="item.type == 'date'" clearable></el-date-picker>
				<!-- 时间段选择 -->

				<el-date-picker v-model="form[item.key]"
					:value-format="item.valueformat ? item.valueformat : item.zhan ? 'yyyy:MM:dd HH:mm:ss' : 'yyyy-MM-dd HH:mm:ss'"
					type="datetimerange" size="small" range-separator="至" :start-placeholder="item.placeholder[0]" :default-time="item.defaultTime"
					:end-placeholder="item.placeholder[1]" v-else-if="item.type == 'timeSlot'" clearable>
				</el-date-picker>
				<!-- 区域选择 -->
				<AreaCascader v-if="item.type == 'area'" @cascaderChange="areaChange"
					:checkStrictly="item.checkStrictly" :value="form[item.key]" />
				<!-- 按钮 -->
				<div v-else-if="item.type == 'button'">
					<el-button size="small" round :type="b.color" @click="clickFn(b.method, b.clean)"
						v-for="(b, bi) in item.button" :key="bi" class="btn" :icon="b.icon">{{ b.name }}</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				formList: [],
				rules: {},
				isValidate: false,
			}
		},
		created() {
			this.getKey(this.data)
		},
		mounted() {},
		methods: {
			clickFn(c, bol) {
				// 点击按钮
				if (bol) {
					c(this.form)
					this.$refs["form"].resetFields()
				} else {
					this.$refs["form"].validate((valid) => {
						if (valid) {
							c(this.form)
						}
					})
				}
			},
			getKey(n) {
				// 处理data
				if (n && n.length > 0) {
					let newList = n.map((m) => {
						if (m.type !== "button") {
							this.$set(this.form, m.key, m.default_value || m.default_value === 0 ? m
								.default_value : "")
							if (m.required) {
								this.rules[m.key] = [{
									required: true,
									message: m.required === true ? m.placeholder : m.required,
									trigger: "blur"
								}]
							}
						}
						if (!m.col) {
							m.col = 8
						}
						return m
					})
					this.formList = newList
				}
			},
			validate(c) {
				// 校验
				this.$refs["form"].validate((valid) => {
					c(valid)
				})
			},
			clear() {
				this.form = {}
			},
		},
		props: {
			// ------- data form表单样式 -------
			// name label名称
			// type 输入框类型（input、select、date、timeSlot、button）
			// key 字段
			// placeholder 提示、校验
			// color 按钮颜色
			// method 按钮方法
			// selectList 下拉选列表
			// required 必填 提示语
			// clean: true 按钮是否为清空操作

			// {
			//   name: '企业名称',
			//   type: 'input',
			//   key: 'name',
			//   placeholder: '请输入企业名称',
			//   required: ''
			// },
			// {
			//   name: '操作人员',
			//   type: 'select',
			//   key: 'person',
			//   placeholder: '请选择操作人员',
			//   selectList: [{
			//     name: 'xiaoming',
			//     value: 1,
			//     prop: ['name', ''value]
			//   }],
			//   required: '请选择操作人员'
			// },
			// {
			//   name: '时间',
			//   type: 'date',
			//   key: 'date',
			//   placeholder: '请选择时间',
			//   required: '请选择时间'
			// },
			// {
			//   name: '时间段',
			//   type: 'timeSlot',
			//   key: 'time',
			//   placeholder: ['开始时间', '结束时间'],
			//   required: '请选择时间段'
			// },
			// {
			//   type: 'button',
			//   button: [
			//     {
			//       name: '搜索',
			//       color: 'primary',
			//       method: (c) => {
			//         this.searchData(c)
			//       }
			//     },
			//     {
			//       name: '清空',
			//       color: 'error',
			//       method: (c) => {
			//         this.searchData(c)
			//       },
			//       clean: true
			//     }
			//   ]
			// }
			// ------- label 左侧label长度 -------
			// ------- inline 是否是行内表格 true/false -------
			// ------- width 表单宽度 -------
			data: {
				type: Array,
				default: () => [],
			},
			label: {
				type: String,
				default: "80px",
			},
			inline: {
				type: Boolean,
				default: true,
			},
			width: {
				type: String,
				default: "100%",
			},

			// ------- 按钮数据 -------
			// {
			//   info 提示信息
			//   icon 图标
			//   type 类型
			//   method: (c) => {
			//     this.searchData(c)
			//   }
			// }
			dataHandler: {
				type: Array,
				default: () => [],
			},
		},
		watch: {
			data: function(n, o) {
				this.getKey()
			},
		},
	}
</script>
<style scoped lang="scss">
	.wrap {
		padding: 10px 18px 10px 0;
		// box-shadow: 1px 4px 17px 1px rgba(249, 177, 177, 0.17);
		border-radius: 10px;
		margin-bottom: 25px;
		position: relative;
	}

	.search_form {
		box-sizing: border-box;
		text-align: left;
		background: #fff;

		.btn {
			width: 68px;
		}
	}

	.el-form-item__content {
		text-align: left;
	}

	// .el-button--primary {
	// 	color: #fff;
	// 	background-color: #409EFF;
	// 	border-color: #409EFF;
	// }

	.el-form-item {
		line-height: 30px;
		margin-bottom: 0;
	}

	.el-select {
		width: 100%;
	}

	.el-range-editor.el-input__inner {
		width: 100%;
	}

	.page_handler {
		display: flex;
		justify-content: flex-end;
		position: absolute;
		bottom: -15px;
		right: 20px;

		.item {
			margin-right: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			font-size: 16px;
			font-weight: 400;
			color: #409EFF;

			.icons {
				border-radius: 50%;
				background-color: #409EFF;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				color: #ffffff;
				margin-right: 8px;
			}
		}

		.item:last-child {
			margin-right: 0;
		}
	}

	.form-inputlist {
		display: flex;

		.tipste {
			color: #838a9d;
			font-size: 16px;
			padding: 0 10px;
		}

		.el-input {
			width: 120px;
		}
	}
</style>
